import React, { Component } from 'react';
import "./App.css"


/* 按下按钮, 滚动到指定距离 */
class App extends Component {
  state ={
    msg:"牛"
  }
  handleClick=()=>{
    this.setState({
      msg:"猪"
    })
  }
  getSnapshotBeforeUpdate(props,state){  //获得快照周期
    // 计算值
    return 200;
  }
  /* 页面渲染时就发生了, 不在这里触发 */
  /* componentDidMount(){
    document.getElementById("outerBox").scrollTop = 200;
  } */
  

  // 组件更新完之后 调用生命周期
  // scrollTop: 滚动条距离顶部的距离=>页面超出容器高度的距离
  componentDidUpdate(props,state,snapshot){ //更新周期
    document.getElementById("outerBox").scrollTop = snapshot
  }

  render() {
    return (
      <div className="outerBox" id="outerBox">
        <div className="innerBox">
          <h1>{this.state.msg}</h1>
          <button onClick={this.handleClick}>更新视图</button>
        </div>
      </div>
    );
  }
}

export default App;
